<!DOCTYPE html>
<html lang="en" style="height:100%">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>实名认证</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css" />
    <!-- <link rel="stylesheet" href="../../css/BarlowCondensed-Bold.woff.ttf" /> -->
    <!-- <link rel="stylesheet" href="../../css/sqc.css"> -->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        input{

            outline:none;
        }

    </style>
</head>

<body style="background: #fff;">
<div id="blank" class="header" v-cloak style="border-bottom:1px solid #f7f4f2;">
    <div v-back.tapmode class="back"></div>
    <div class="title">实名认证</div>
</div>
<div id="app"  v-cloak style="padding-top:60px;">
  <div style="margin:10px 25px;font-size:12px;color:#F95656" v-show="step>0">认证信息只能填写一次，请如实填写，因自己填写错误造成的损失，用户自己承担。</div>
  <div style="margin:10px 25px;font-size:12px;color:#F95656;text-align:center" v-show="step==0">实名认证收费1.5元</div>

    <div class="give-number" style="width: 90%;margin: auto;margin-top: 30px;">
        <div class="login-line" v-show="step>0">
            <input type="text" maxlength="11" v-model="name"  placeholder="自动识别姓名" readonly>
        </div>
        <div class="login-line" v-show="step>0">
            <input class="text" v-model="idnum"  placeholder="自动识别身份证号" readonly/>
        </div>
        <div class="login-line" v-show="step>0">
            <input type="text"  placeholder="请手动输入支付宝账号" v-model="alicount">
        </div>
        <div style="text-align:center"><img :src="image" v-show="image" width="180px" height="100px"></div>
        <div class="regrist-button regrist-button-active" v-show="step==0" style="margin-bottom:24px;margin-top: 64px;width: 100%;;background:#00a3d2" v-myclick="pay_action">
            <!--<img v-src="'../../image/face.png'" />-->
            <span>支付认证</span>
        </div>
        <div class="regrist-button regrist-button-active" v-show="step==1" style="margin-bottom:24px;margin-top: 24px;width: 100%;" v-myclick="up_action">
            <!--<img v-src="'../../image/face.png'" />-->
            <span>请扫描身份证正面照</span>
        </div>
        <div v-show="step==2" class="regrist-button regrist-button-active" style="margin-bottom:24px;margin-top: 24px;width: 100%;" v-myclick="up_action_face">
            <!--<img v-src="'../../image/face.png'" />-->
            <span>人脸采集</span>
        </div>
        <div v-show="step==3" class="regrist-button regrist-button-active" style="margin-bottom:24px;margin-top: 24px;width: 100%;" v-myclick="submit">
            <!--<img v-src="'../../image/face.png'" />-->
            <span>提交认证</span>
        </div>

    </div>
</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/components.js"></script>
<script type="text/javascript" src="../../script/jquery.js"></script>

<script>
    var vm,
        wx,
        name,
        idnum,
        alicount,
        image,
        baidu;
        var twoBaiDuOcr = null;
    apiready = function () {
        setBSImg();
        new Vue({
            el: '#blank'
        })
        var zyBaiduFace = api.require('zyBaiduFace');
        var param = {
          "licenseID":api.systemType=="ios"?'quhongr-idea-face-ios':'quhongr-idea-face-android',
          "licenseFileName":api.systemType=="ios"?'idl-license.face-ios':'idl-license.face-android',
          "groupID":"qhr",
          "apiKey":"qwFsMfDoSn6WOGn68CXcLpn6",
          "secretKey":"yT9f8HmrEBgqQqiu2m3Sj5OmzRyWRmmP",
        };
          zyBaiduFace.init(param, function(ret, err){

          });
        twoBaiDuOcr = api.require('twoBaiDuOcr');
        var param={}
        twoBaiDuOcr.initAccessToken(param,function(ret, err){
            if (api.systemType != 'ios'){
                twoBaiDuOcr.initCameraNative({ }, function(ret, err) {
                });
            }
        })
        var data = {
          member_id: getPrefs('member_id'),
          token:getPrefs('token'),
          wxOpenId:getPrefs('openid')
        };
        var callback = function (ret) {
            user = ret.content;
            initApp();
            // api.parseTapmode();
        };

        pinet.post(APIURLP+'/play/user/queryUserInfo', data, callback);
        // setBSImg();
        api.parseTapmode();
        addListeners();
    };

    function initApp() {
        // var isBigImg = Vue.BSImg == 'big';
        vm = new Vue({
            el: '#app',
            data: {
              name:name,
              idnum:idnum,
              alicount:alicount,
              image:image,
              isPay:user.isPay,
              step:user.isPay==2?1:0
            },
            computed: {

            },
            methods: {
              up_action:function(){
                twoBaiDuOcr.idCardFront({},function(ret, err) {
                  vm.name = ret.name;
                  vm.idnum = ret.idNumber;
                  vm.step = 2;
              }
            )},
            submit:function(){
              var data = {
                token:getPrefs('token'),
                fullName:this.name,
                idCard:this.idnum,
                fixedNum:this.alicount
              };
              var jsonData = JSON.stringify(data);
              var base = new Base64();
              var base64 = base.encode(JSON.stringify(data));
              var params = {
                jsonData:base64
              }
              var callback = function (ret) {
                api.toast({
                    msg: '认证成功',
                    duration: 2000,
                    location: 'middle'
                });

                closeWin();

              };

              pinet.post(APIURLP+'/play/csm/addFixed', params, callback);
            },
            up_action_face:function(){
              if(!this.alicount){
                alert('请填写支付宝账号');
                return;
              }
              var zyBaiduFace = api.require('zyBaiduFace');
              var param = {
//                        "group_id_list":"moduleTest",//(选填)从指定的group中进行查找 用逗号分隔，上限10个 不传时是init中的groupid
                      "quality_control":"NORMAL",//(选填)图片质量控制 NONE: 不进行控制、LOW:较低的质量要求、NORMAL: 一般的质量要求、HIGH: 较高的质量要求，默认 NORMAL，若图片质量不满足要求，则返回结果中会提示质量检测失败
                      "liveness_control":"HIGH",//(选填)活体检测控制 NONE: 不进行控制、LOW:较低的质量要求、NORMAL: 一般的质量要求、HIGH: 较高的质量要求，默认 NORMAL，若图片质量不满足要求，则返回结果中会提示质量检测失败
                      "user_id":"13049", //(选填)当需要对特定用户进行比对时，指定user_id进行比对。即人脸认证功能。
              };
            zyBaiduFace.open(param, function(ret, err){
              vm.step=3;
            });
            },
              pay_action:function(){
                var data = {
                  token:getPrefs('token'),
                };
                var jsonData = JSON.stringify(data);
                var base = new Base64();
                var base64 = base.encode(JSON.stringify(data));
                var params = {
                  jsonData:base64
                }
                var callback = function (ret) {
                  var jsonData = ret.content.jsonData;
                  var obj = JSON.parse(base.decode(jsonData));
                  var aliOrder = obj.aliOrder;
                  var aliPayPlus = api.require('aliPayPlus');
                  aliPayPlus.payOrder({
                      orderInfo: aliOrder
                  }, function(ret, err) {
                    if (ret.code == 9000) {
                      vm.step =1;
                      // vm.user.isPay=1;
                      } else if (ret.code == 6001) {

                      } else {
                          alert('支付失败,错误码:' + ret.code);
                      }
                  });
                };

                pinet.post(APIURLP+'/play/ali/sendAli', params, callback);
              },
            },
            watch: {

            },
        })
    }

    function addListeners(){

    }

</script>

</html>
